<template>
  <div>
    {{ getMenuList() }}
    <div class="header">
      <template>
        <el-button type="success" size="medium" @click="toAdd">添加</el-button>
      </template>
    </div>
    <div class="body">
      <el-table
        :data="menuList"
        style="width: 100%;margin-bottom: 20px;"
        :header-cell-style="{background:'#DCDCDC',color:'#606266'}"
        row-key="sort"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column prop="name" label="菜单名称" width="200" header-align="center" align="left" class="table-header">
        </el-table-column>
        <el-table-column prop="sort" label="排序" width="80" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="url" label="请求地址" width="180" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="type" label="类型" width="80" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="isShow" label="可见" width="120" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="permission" width="200" label="权限标识" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="createdUser" width="100" label="创建者" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="createdTime" width="200" label="创建时间" header-align="center" align="center">
        </el-table-column>

        <el-table-column prop="modifiedUser" width="100" label="修改者" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="modifiedTime" width="200" label="修改时间" header-align="center" align="center">
        </el-table-column>
        <el-table-column label="操作" header-align="center" align="center">
          <template slot-scope="s">
            <el-button type="primary" size="mini" @click="toUpdate(s.$index,s.row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(s.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="button">

      </div>
      <el-dialog title="菜单信息" :visible.sync="dialogVisible" width="20%">
        <el-form :model="m" label-width="80px">
          <el-form-item label="上级菜单:">
            <el-cascader v-model="m.parentId" :options="menuListOptions" :props="optionProps"
                         :show-all-levels="false"></el-cascader>
          </el-form-item>
          <el-form-item label="菜单名称:">
            <el-input size="mini" v-model="m.name"></el-input>
          </el-form-item>
          <el-form-item label="排序:">
            <el-input size="mini" v-model="m.sort"></el-input>
          </el-form-item>
          <el-form-item label="请求地址:">
            <el-input size="mini" v-model="m.url"></el-input>
          </el-form-item>
          <el-form-item label="菜单类型:">
            <el-radio-group v-model="m.type">
              <el-radio :label="0">目录</el-radio>
              <el-radio :label="1">菜单</el-radio>
              <el-radio :label="2">按钮</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="是否可见:">
            <el-radio-group v-model="m.isShow">
              <el-radio :label="1">显示</el-radio>
              <el-radio :label="0">隐藏</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="权限标识:">
            <el-input size="mini" v-model="m.permission"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="sub">确定</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </span>
      </el-dialog>
    </div>
  </div>

</template>

<script>

import axios from "axios";
axios.defaults.withCredentials=true

export default {
  name: "MenuM",
  data() {
    return {
      method: 'post',
      menuName: '',
      refresh: 0,
      index: null,
      isUpdate: false,
      dialogVisible: false,
      m: {
        id: '',
        parentId: '',
        name: '',
        sort: '',
        url: '',
        type: '',
        isShow: '',
        permission: ''
      },
      menuList: [],
      menuListOptions: [],
      optionProps: {
        checkStrictly: true,
        value: "id",
        label: "name",
        children: "children"
      }
    }
  },
  methods: {
    getMenuList: function () {
      if (this.refresh === 0) {
        this.refresh++;
        var that = this;
        axios.get("http://localhost:8081/menu/all").then(function (result) {
          that.menuList = result.data.data.menus;
          that.menuListOptions = JSON.parse(JSON.stringify(result.data.data.menus));
          that.menuListOptions.splice(0, 0, {id: 0, name: '无'});
        })
      }
    },
    toAdd: function () {
      console.log(this.menuList);
      this.dialogVisible = true;
      this.m = {id: ''};
      this.method = 'post';
    },
    toUpdate: function (index, row) {
      this.dialogVisible = true;
      this.isUpdate = true;
      this.index = index;
      this.m = JSON.parse(JSON.stringify(row));
      this.m.parentId = JSON.parse(JSON.stringify(row.parentId));
      this.method = 'put';
    },
    sub: function () {
      this.dialogVisible = false;
      var that = this;
      this.m.parentId = this.m.parentId[this.m.parentId.length -1];
      console.log(this.m);
      if (this.method === 'post') {
        axios.post("http://localhost:8081/menu", this.m).then(function (result) {
          that.refresh = 0;
          that.getMenuList();
          that.messageAlert(result);
        });
      } else {
        axios.put("http://localhost:8081/menu", this.m).then(function (result) {
          that.refresh = 0;
          that.getMenuList();
          that.messageAlert(result);
        });
      }

    },
    del: function (row) {
      var that = this;
      axios.delete("http://localhost:8081/menu/" + row.id).then(function (result) {
        that.refresh = 0;
        that.getMenuList();
        that.messageAlert(result);
      });
    },
    messageAlert: function (result) {
      if (result.data.status === 1) {
        this.$message({
          message: result.data.msg,
          center: true,
          type: "success"
        });
      } else {
        this.$message({
          message: result.data.msg,
          center: true,
          type: "error"
        });
      }
    }
  }

}

</script>

<style>
.header {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding-top: 10px;
  padding-left: 10px;
  padding-bottom: 10px;

}

.body {
  margin-top: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.query_span {
  margin-left: 100px;
}

.el-input__inner {
  width: 250px;
}

.button {
  height: 100px;
}


</style>


